/*
 * @Author: wangming
 * @Date: 2021-04-14 16:33:40
 * @LastEditors: wangming
 * @LastEditTime: 2022-05-06 10:36:18
 * @Description: file content
 */

import myMixin from "@/pageComponents/myMixin";
import vmMixin from "@/pageComponents/vmMixin";
var moment = require("moment");

export default {
  mixins: [myMixin, vmMixin],
  computed: {
    step() {
      const timeStep = {
        1: "00:01",
        5: "00:05",
        15: "00:15",
        30: "00:30",
      };
      const step = timeStep[this.config.__config.timefilter] || "00:01";
      if (this.config.__config.timeType === 1) {
        return this.config.__config.timefilter || 1;
      } else {
        return step;
      }
    },
    timeMin() {
      return (
        this.config.__config.timeMin ||
        (this.config.__config.timeType === 1 ? "00:00" : "00:00:00")
      );
    },
    timeMax() {
      return (
        this.config.__config.timeMax ||
        (this.config.__config.timeType === 1 ? "23:59" : "23:59:59")
      );
    },
    defaultTime() {
      const d = new Date();
      if (d < this.minstr || d > this.maxstr) {
        return this.minstr;
      } else {
        return d;
      }
    },
    currentFormatDate() {
      return moment().format("YYYY/MM/DD");
    },
    minstr() {
      return new Date(this.currentFormatDate + " " + this.timeMin);
    },
    maxstr() {
      return new Date(this.currentFormatDate + " " + this.timeMax);
    },
  },
  methods: {
    outValue(t) {
      this.runEventName("change");
      this.$emit("input", t);
      this.$parent.$emit("el.form.change");
    },
  },
  render() {
    const { width, placeholder, timeType } = this.config.__config;
    if (this.viewInfo) {
      return (
        <div
          style={{
            display: "inline-block",
            whiteSpace: "break-spaces",
            width: width + "%",
          }}
        >
          {this.value}
        </div>
      );
    } else {
      return timeType === 1 ? (
        <date-picker
          type="time"
          placeholder={placeholder}
          disabled={this.isEdit || this.disabled}
          prefix-class="xmx"
          popupClass="reset-date-picker-zindex"
          value={this.value || ""}
          valueType="format"
          format="HH:mm"
          style={{
            width: width + "%",
          }}
          default-value={this.defaultTime}
          minute-step={this.step}
          onInput={(t) => this.outValue(t)}
        >
          <template slot="icon-calendar">
            <i class="el-icon-time"></i>
          </template>
        </date-picker>
      ) : (
        <el-time-picker
          disabled={this.disabled}
          placeholder={placeholder}
          value={this.value || ""}
          style={{
            width: width + "%",
          }}
          picker-options={{
            step: this.step,
          }}
          value-format="HH:mm:ss"
          onInput={(t) => this.outValue(t)}
        ></el-time-picker>
      );
    }
  },
};
